{% extends 'base.html' %}

{% block title %}Set New Password — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
    nav, footer { display: none !important; }
    body { background: #f0f4f8; }

    .auth-wrapper { min-height: 100vh; display: flex; }

    .brand-panel {
        background: linear-gradient(145deg, #1a3c6e 0%, #2563eb 60%, #3b82f6 100%);
        color: #fff;
        width: 42%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 3.5rem;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }
    .brand-panel::before {
        content: ''; position: absolute;
        width: 320px; height: 320px; border-radius: 50%;
        background: rgba(255,255,255,.06); top: -80px; right: -80px;
    }
    .brand-panel::after {
        content: ''; position: absolute;
        width: 240px; height: 240px; border-radius: 50%;
        background: rgba(255,255,255,.05); bottom: -60px; left: -60px;
    }
    .brand-panel .brand-logo-img { height: 52px; width: auto; max-width: 240px; display: block; margin-bottom: 1.25rem; }
    .brand-panel h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.5px; margin-bottom: .4rem; }
    .brand-panel .tagline { font-size: .95rem; opacity: .8; margin-bottom: 2.5rem; line-height: 1.6; }
    .feature-item {
        display: flex; align-items: center; gap: .75rem;
        margin-bottom: 1rem; font-size: .9rem; opacity: .9;
    }
    .feature-item .fi-icon {
        width: 32px; height: 32px;
        background: rgba(255,255,255,.15); border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; font-size: 1rem;
    }

    .form-panel {
        flex: 1; display: flex; align-items: center;
        justify-content: center; padding: 2.5rem 2rem;
    }
    .form-box { width: 100%; max-width: 420px; }
    .form-box .form-control {
        padding: .65rem 1rem; border-radius: 10px;
        border: 1.5px solid #e2e8f0; font-size: .95rem;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-box .form-control:focus {
        border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    .form-box .form-control.is-invalid { border-color: #ef4444; }
    .form-box .input-group .form-control { border-right: none; border-radius: 10px 0 0 10px !important; }
    .form-box .input-group .btn-eye {
        border: 1.5px solid #e2e8f0; border-left: none;
        border-radius: 0 10px 10px 0 !important;
        background: #fff; color: #64748b;
        padding: .65rem .9rem; transition: color .2s;
    }
    .form-box .input-group .btn-eye:hover { color: #2563eb; }
    .form-box .input-group .form-control:focus + .btn-eye { border-color: #2563eb; }
    .btn-action {
        background: linear-gradient(135deg, #1d4ed8, #2563eb);
        border: none; border-radius: 10px; padding: .75rem;
        font-size: 1rem; font-weight: 600; letter-spacing: .3px;
        transition: opacity .2s, transform .1s;
    }
    .btn-action:hover { opacity: .92; transform: translateY(-1px); }
    .field-label { font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .35rem; display: block; }

    @media (max-width: 767px) { .brand-panel { display: none; } }
</style>
{% endblock %}

{% block content %}
<div class="auth-wrapper">

    <!-- ── Left brand panel ─────────────────────────────── -->
    <div class="brand-panel">
        <a href="{% url 'home' %}" class="text-decoration-none d-inline-block mb-3">
        {% if site_settings.logo_light_url %}
        <img src="{{ site_settings.logo_light_url }}" alt="{{ site_settings.institute_name }}" class="brand-logo-img" style="margin-bottom:0;">
        {% else %}
        <div style="font-size:1.5rem;font-weight:700;color:#fff;">{{ site_settings.institute_name }}</div>
        {% endif %}
        </a>
        <p class="tagline">Almost there — set a new strong<br>password to secure your account.</p>

        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-lock-fill"></i></div>
            <span>End-to-end secure password reset</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-patch-check"></i></div>
            <span>One-time verified reset link</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-shield-fill-check"></i></div>
            <span>Strong password requirements enforced</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-arrow-right-circle"></i></div>
            <span>Sign in immediately after reset</span>
        </div>

        <p class="mt-4 mb-0" style="font-size:.78rem;opacity:.55;">
            &copy; {% now "Y" %} {{ site_settings.institute_name }}. All rights reserved.
        </p>
    </div>

    <!-- ── Right form panel ─────────────────────────────── -->
    <div class="form-panel">
        <div class="form-box">

            <div class="mb-4 text-center">
                <a href="{% url 'home' %}" class="text-decoration-none d-inline-block">
                {% if site_settings.logo_dark_url %}
                <img src="{{ site_settings.logo_dark_url }}" alt="{{ site_settings.institute_name }}"
                     style="max-height:56px;max-width:220px;object-fit:contain;margin-bottom:1rem;">
                {% endif %}
                </a>
                <h2 class="fw-bold mb-1" style="color:#0f172a;">Set new password</h2>
                <p class="text-muted" style="font-size:.9rem;">Choose a strong password to protect your account.</p>
            </div>

            {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3 py-2 small" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
            {% endif %}

            {% if form.non_field_errors %}
            <div class="alert alert-danger rounded-3 py-2 small mb-3">
                <i class="bi bi-exclamation-triangle me-1"></i>
                {% for error in form.non_field_errors %}{{ error }}{% if not forloop.last %} {% endif %}{% endfor %}
            </div>
            {% endif %}

            <form method="post" novalidate>
                {% csrf_token %}
                <input type="hidden" name="uidb64" value="{{ uidb64 }}">
                <input type="hidden" name="token" value="{{ token }}">

                <div class="mb-3">
                    <label class="field-label" for="id_new_password1_input">
                        <i class="bi bi-lock me-1"></i>New Password <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <input type="password" id="id_new_password1_input" name="new_password1"
                               class="form-control{% if form.new_password1.errors %} is-invalid{% endif %}"
                               placeholder="Enter new password" autocomplete="new-password" required>
                        <button class="btn btn-eye" type="button" id="toggleP1" tabindex="-1">
                            <i class="bi bi-eye" id="eyeP1"></i>
                        </button>
                    </div>
                    <div class="form-text text-muted" style="font-size:.78rem;margin-top:.3rem;">Min 8 characters, not entirely numeric.</div>
                    {% if form.new_password1.errors %}
                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ form.new_password1.errors.0 }}</div>
                    {% endif %}
                </div>

                <div class="mb-4">
                    <label class="field-label" for="id_new_password2_input">
                        <i class="bi bi-lock-fill me-1"></i>Confirm New Password <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <input type="password" id="id_new_password2_input" name="new_password2"
                               class="form-control{% if form.new_password2.errors %} is-invalid{% endif %}"
                               placeholder="Repeat new password" autocomplete="new-password" required>
                        <button class="btn btn-eye" type="button" id="toggleP2" tabindex="-1">
                            <i class="bi bi-eye" id="eyeP2"></i>
                        </button>
                    </div>
                    <div id="matchFeedback" class="form-text small mt-1"></div>
                    {% if form.new_password2.errors %}
                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ form.new_password2.errors.0 }}</div>
                    {% endif %}
                </div>

                <button type="submit" class="btn btn-action btn-primary w-100 text-white mb-3">
                    <i class="bi bi-check-circle me-2"></i>Reset Password
                </button>
            </form>

            <p class="text-center text-muted small mb-1">
                Remember it now?
                <a href="{% url 'accounts:login' %}" class="text-primary text-decoration-none fw-semibold">Sign In</a>
            </p>
            <p class="text-center text-muted small mb-0">
                <a href="{% url 'home' %}" class="text-secondary text-decoration-none">
                    <i class="bi bi-house me-1"></i>Return to Landing Page
                </a>
            </p>

        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    function eyeToggle(btnId, inpId, icoId) {
        var btn = document.getElementById(btnId);
        var inp = document.getElementById(inpId);
        var ico = document.getElementById(icoId);
        if (!btn) return;
        btn.addEventListener('click', function () {
            inp.type = inp.type === 'password' ? 'text' : 'password';
            ico.className = inp.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
        });
    }
    eyeToggle('toggleP1', 'id_new_password1_input', 'eyeP1');
    eyeToggle('toggleP2', 'id_new_password2_input', 'eyeP2');

    var p1 = document.getElementById('id_new_password1_input');
    var p2 = document.getElementById('id_new_password2_input');
    var fb = document.getElementById('matchFeedback');
    function checkMatch() {
        if (!p2.value) { fb.innerHTML = ''; p2.classList.remove('is-valid','is-invalid'); return; }
        if (p1.value === p2.value) {
            fb.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>Passwords match</span>';
            p2.classList.add('is-valid'); p2.classList.remove('is-invalid');
        } else {
            fb.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Passwords do not match</span>';
            p2.classList.add('is-invalid'); p2.classList.remove('is-valid');
        }
    }
    if (p1 && p2) { p1.addEventListener('input', checkMatch); p2.addEventListener('input', checkMatch); }
})();
</script>
{% endblock %}